<template>
  <div class="row">
    <div v-if="this.$store.state.msgFlag" class="msg">请输入要查询的用户</div>
    <div v-else-if="this.$store.state.loadingFlag" class="loading">loading....</div>
    <div v-else-if="this.$store.state.noBodyFlag" class="msg">查无此人...</div>
    <div v-else-if="this.$store.state.errorFlag" class="msg">网络抖动...</div>
    <div v-else class="card" v-for="item in List" :key="item.id">
      {{item.name}}
      <a :href="item.homepage" target="_blank">
        <img :src="item.url" style='width: 100px'/>
      </a>
      <p class="card-text">{{item.username}}</p>
    </div>
  </div>
</template>

<script>
  import {mapState,mapGetters} from 'vuex' 
  export default {
    name: "list",
    computed:{
       ...mapGetters(['List'])
    },
  }
</script>

<style scoped>
  .msg{
    color: red;
    text-align: center;
    font-size: 30px
  }
  .loading{
    color: green;
    text-align: center;
    font-size: 30px
  }
</style>
